<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true"><block slot="content"><text class="text-darkgrey">电子券详情</text></block></cu-custom>
		<view >
			<view class="cu-card case">
				<view class="padding bg-white solid-top">
					<view >
						<view class="flex justify-between">
							<view class="padding-bottom-sm">
								<text class="text-darkgrey text-df cuIcon-titles">店铺ID：{{data.shopId}}</text>
							</view>
							<view class="text-xs cu-tag light round" :class="data.enable==1?'bg-blue':'bg-red'">{{data.enable==1?'已启用':'已关闭'}}</view>
						</view>
						<view class="text-purple-grey text-sm">名称：{{data.name}}</view>
						<view class="text-purple-grey text-sm">排序：{{data.sort}}</view>
						<view class="text-purple-grey text-sm">库存：{{data.stock}}</view>
						<view class="text-purple-grey text-sm">订单金额：{{data.premiseAmount}}</view>
						<view class="text-purple-grey text-sm">类型：{{data.type==1?'代金券':data.type==2?'折扣券':''}}</view>
						<view class="text-purple-grey text-sm">减免金额：{{data.reduceAmount}}</view>
						<view class="text-purple-grey text-sm">折扣率：{{data.discount}}</view>
						<view class="text-purple-grey text-sm">到期类型：{{data.expireType==1?'领券后生效':data.expireType==2?'固定时间段':''}}</view>
						<view class="text-purple-grey text-sm">有效天数：{{data.validDays}}</view>
						<view class="text-purple-grey text-sm" v-if="data.validBeginTime">时间范围：{{data.validBeginTime}}{{' - '}}{{data.validEndTime}}</view>
						<view class="text-purple-grey text-sm">适用商品：{{data.suitType==1?'全部商品':data.suitType==2?'指定商品可用':''}}</view>
						<!--                            <view class="text-grey text-sm">指定商品：{{data.listGoodsSpu}}</view>-->
						<view class="text-purple-grey text-sm text-right">{{data.createTime}}</view>
					</view>

					<view v-if="globalData.permissions['mall:couponinfo:edit']" class="margin-top-sm flex justify-end">
						<button  @click="changeEnable" class="cu-btn round button-bg shadow-blur margin-right-sm"  :class="data.enable==1?'bg-red':'bg-green'">{{data.enable==1?'关闭':'启用'}}</button>
					</view>
				</view>
			</view>
			<view class="cu-list goods-list margin-top-xs" v-if="data.listGoodsSpu&&data.listGoodsSpu.length>0">
				<view >
					<view class="bg-white padding">
						<text class="text-darkgrey margin-right-xs cuIcon-titles"></text>指定可用商品
					</view>
				</view>
				<view class="cu-item radius bg-white margin-bottom-xs padding-left padding-right padding-bottom"  v-for="data in data.listGoodsSpu" :key="data.id">
					<view class="flex justify-between">
						<view class="  padding-bottom-sm">
							<text class="text-darkgrey margin-right-xs cuIcon-shopfill margin-left-xs"></text>商品编码：{{data.spuCode}}
						</view>
						<view class="text-xs cu-tag light round" :class="data.shelf==1?'bg-green':'bg-red'">{{data.shelf==1?'已上架':'已下架'}}</view>
					</view>
					<view class="cu-list menu-avatar flex justify-between  padding-bottom ">
						<view class="cu-avatar img-box" :style="{'background-image':data.picUrls?'url('+data.picUrls[0]+')':''}"></view>
						<view class="content flex-sub padding-left  text-sm">
							<view class="text-darkgrey  text-to-long" >{{data.name}}</view>
							<view class="text-purple-grey flex justify-between margin-top-xs">
								销量：{{data.saleNum}}
							</view>
							<view class=" margin-top-xs">
								<text class="text-red text-price text-xl text-bold">{{data.priceDown}}</text>
								<text class="text-red text-xl text-bold" v-show="data.priceUp&&data.priceDown!=data.priceUp"> {{' - '}} <text class="text-red text-price text-xl text-bold"> {{data.priceUp}}</text></text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>

	const app = getApp();
	import {getPage, getObj, addObj, putObj, delObj} from '@/api/mall/couponinfo'

	export default {
		onLoad(e){
			if(e){
				this.id = e.id;
				this.getData();
			}
		},
		data() {
			return {
                globalData: app.globalData,
				CustomBar: this.CustomBar,
				id: null,
				data: {},
			}
		},
		methods: {
			changeEnable(row){
				let content = '确定要启用吗?';
				let enable = 1;
				if(this.data.enable==1){
					enable = 0;
					content = '确定要关闭吗?';
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							putObj({
								id: that.id,
								enable: enable
							}).then(data => {
								uni.showToast({title:"操作成功"})
								that.getData()
							});
						} else if (res.cancel) {}
					}
				});

			},
			getData(){
				getObj(this.id).then(response=>{
				    if(response.data){
				        this.data = response.data;
				    }
				});
			},
		}
	}
</script>

<style>
	.img-box{
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.button-bg{
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
</style>
